<template>
    <div class="phoneLogin-container">
        <div class="header">
           <div @click="goHome"><van-icon size="25" name="cross" /></div>
           <div class="title">手机号登录</div>
        </div>
        <div class="login-title">
            <p>请输入验证码</p>
            <p>已发送至+86 {{phone.slice(0,3)}}****{{phone.slice(-4)}} &nbsp;  <van-icon @click="goBack" size="15" name="edit" /></p>
            <p v-if='second !== 0' class="countSecond">{{second}}s</p>
            <p v-else class="regetcode" @click='reGetCode'>重新获取</p>
        </div>

        <div class="phone-code">
            <vue-vercode :codeLength="4" ref="vercode" />
            <div class="login-btn">
              <div @click="phoneLogin" class="btn">登录</div>
            </div>
        </div>
    </div>
</template>

<script>
import {Toast} from 'vant'
import VueVercode from "@auspicious/vue-vercode";
export default {
    name:"phoneLogin",
    components:{
        "vue-vercode": VueVercode
    },
    data(){
        return{
            phone:'',
            // phoneCode:''
            second:60,
        }
    },
    computed:{
        isInput(){
            return this.phone 
        }
    },
    watch:{
        // phoneCode(){
        //     if(this.phoneCode.length === 6){
        //         console.log(this.phoneCode)
        //     }
        // }

    },
    mounted(){
        // this.getPhoneCode()
        this.countSecond()
        this.phone = this.$store.state.loginInfo.phone || window.localStorage.getItem('phone')
    },
    methods:{
        goHome(){
            this.$router.push({path:'/home'})
        },
        countSecond(){
            let timer = setInterval(()=>{
                this.second--
                if(this.second === 0){
                    clearInterval(timer)
                    // this.second = 60
                }
            },1000)
        },
        
        clearInput(){
            this.phone = ''
        },
        phoneLoginFirst(){
            let phoneReg =/^[1][3,4,5,7,8,9][0-9]{9}$/;
            if(!phoneReg.test(this.phone)){
                Toast('请输入正确的手机号')
            }else{
                alert('true')
            }
        },
        getPhoneCode(){
            const code = this.$refs.vercode.getCode();
            if(!code || code.length !== 4){
                Toast('请输入正确的验证码')
            }else{
                return code
            }
            // console.log(code)
        },
        reGetCode(){
            this.second = 60
            this.countSecond()
            const phone = this.$store.state.loginInfo.phone || window.localStorage.getItem('phone')
            this.$store.dispatch('getPhoneCode', phone)
            // console.log(phoneCode)
        },
        phoneLogin(){
            let phoneCode = this.getPhoneCode()
            let phone = this.$store.state.loginInfo.phone || window.localStorage.getItem('phone')
            if(phone && phoneCode){
            console.log(phoneCode,phone)
            this.$store.dispatch('verifyCode',{phone:phone,captcha:phoneCode})
            }else{
                return
            }

        },
        goBack(){
            this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
 .phoneLogin-container{
     height: 100%;
     width: 100%;
 }
 .header{
     display: flex;
     justify-content: flex-start;
     align-content: center;
     padding: 20px;
 }
 .header .title{
     margin-left: 20px;
     font-size: 16px;
     font-weight: bold;
 }
 .login-title{
     padding: 20px;
     position: relative;
 }
 .login-title p:nth-child(1){
     font-size: 16px;
     font-weight: bold;
 }
 .login-title p:nth-child(2){
     font-size: 12px;
     /* font-weight: bold; */
     color: #888888;
     margin-top: 5px;
 }
 .login-title .countSecond,.regetcode {
     position: absolute;
     right: 20px;
     bottom: 20px;
     color: #888888;
     font-size: 14px;
 }
 .login-title .regetcode{
     color: #e70012;
 }
 .phone-code{
    padding: 20px;
     

 }
 .phone-code .content{
     display: flex;
     align-items: center;
     height: 40px;
     width:100%;
     /* border-bottom: 1px solid #eeeeee; */
 }
 .phone-code .input{
     width: 15%;
     height: 40px;
     border-bottom: 1px solid #888888;
     margin-left: 10px;
 }
  .login-btn{
     padding: 10px;
     display: flex;
     /* width: 100%; */
     justify-content: center;

 }
  .login-btn .btn{
     text-align: center;
     width: 100%;
     background-color:#e70012 ;
     color: #ffffff;
     font-size: 15px;
     /* padding: 5px 10px; */
     padding: 10px;
     margin-top: 20px;
     border-radius: 25px;

 }

</style>